<!--排班计划明细组件-->
<template>
    <div>
        <el-form :model="model"  ref="ruleForm" label-width="100px"
                    class="demo-ruleForm page-form">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="排班编号" prop="PlanCode">
                                <el-input v-model="model.PlanCode" :readonly="true"></el-input>
                            </el-form-item>

                            <el-form-item label="排班名称" prop="PlanName">
                                <el-input v-model="model.PlanName" :readonly="true"></el-input>
                            </el-form-item>

                            <el-form-item label="班组编号" prop="TeamCode">
                                <el-input v-model="model.TeamCode" :readonly="true"></el-input>
                            </el-form-item>

                            <el-form-item label="班组类别">
                                <el-input v-model="model.TeamType" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="班组名称">
                                <el-input v-model="model.TeamName" :disabled="true"></el-input>
                            </el-form-item>

                        </el-col>

                        <el-col :span="12">

                            <el-form-item label="轮班时长" prop="ShiftDuration">
                                <el-input v-model="model.ShiftDuration" :readonly="true"></el-input>
                            </el-form-item>

                            <el-form-item label="轮班方式" prop="ShiftWay" class="vertical-layout" display="block">
                                <el-input v-model="model.ShiftWay" :readonly="true"></el-input>
                                <!--<el-select v-model="model.ShiftWay" allow-create filterable :readonly="true">
                                    <el-option label="白班" value="白班"></el-option>
                                    <el-option label="中班" value="中班"></el-option>
                                    <el-option label="晚班" value="晚班"></el-option>
                                </el-select>-->
                            </el-form-item>

                            <el-form-item label="倒班方式" prop="ChangeShiftWay" class="vertical-layout" display="block">
                                <el-input v-model="model.ChangeShiftWay" :readonly="true"></el-input>
                                <!--<el-select v-model="model.ChangeShiftWay" placeholder="请选择倒班方式" allow-create filterable :readonly="true">
                                    <el-option label="两班倒" value="两班倒"></el-option>
                                    <el-option label="三班倒" value="三班倒"></el-option>
                                    <el-option label="四班倒" value="四班倒"></el-option>
                                </el-select>-->
                            </el-form-item>

                            <el-form-item label="开始日期" prop="StartDate">
                                <el-date-picker v-model="model.StartDate" type="datetime"
                                :readonly="true"></el-date-picker>
                            </el-form-item>

                            <el-form-item label="结束日期" prop="EndDate">
                                <el-date-picker v-model="model.EndDate" type="datetime"
                                :readonly="true"></el-date-picker>
                            </el-form-item>

                        </el-col>

                    </el-row>

                </el-form>

                <div style="border: 1px solid #dcdfe6; padding: 10px;">
            <h1 style="margin: 10px;">计划人员</h1>
          
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="PersonCode" label="员工编号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="PlanPersonName" label="员工名称" :show-overflow-tooltip="true"></el-table-column>
                    

            </el-table>
        </div>

    </div>
    
</template>
<script>

export default {
    props:{
        model:{
            require:true,
        type:Object
        }
    },
    data(){
        return{
            tableData: [],
            isLoading: false,
        }
    },
    created() {
        this.GetPlanTeambyId(this.model.Id);
    },
    methods:{
        GetPlanTeambyId(Id) {
            this.isLoading = true;
            this.$http.get('/api/PlanTeam/GetPlanTeambyId', {
                params: {
                    PlanTeamId: Id
                }
            })
                .then(res => {
                    this.tableData = res.Data;
                    this.isLoading = false;
                })
        }
    }
}
</script>
